﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HPV-CRM湖北省大数据可视化平台(模拟)</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/globle.css">
</head>
<body>
<div class="main">
    <div class="top_title">
        <img src="images/top_title.png"/>
    </div>
    <div class="datas">
        <div class="data_left">
            <div class="left_top">
                <div class="left_top_title">基础数据</div>
                <div class="left_top_main">
                    <div class="left_main_circle">
                        <p class="counter-value circle_num1">323</p>
                        <span class="span_font">有效接种累计<br/>(万)</span>
                    </div>
                    <div class="left_main_circle">
                        <p class="counter-value circle_num2">0.2</p>
                        <span class="span_font">待观察接种累计<br/>(万)</span>
                    </div>
                    <div class="left_main_circle">
                        <p class="counter-value circle_num3">0.04</p>
                        <span class="span_font">不良反应累计<br/>(万)</span>
                    </div>
                </div>
            </div>
            <div class="left_bottom">
                <div class="left_top_title">业务类型</div>
                <div id="Business_type" class="left_top_main left_bottom_main"></div>
            </div>
        </div>
        <div class="data_middle">
            <div class="middle_top">
                <div class="middle_top_list">
                    <div class="list_title">累计销售量</div>
                    <div class="list_num list_num1"><span class="counter-value">901</span>万</div>
                    <div class="today_list_font">今日销售<span>12</span>万</div>
                </div>
                <div class="middle_top_list">
                    <div class="list_title">累计交易金额</div>
                    <div class="list_num list_num2"><span class="counter-value">37.66</span>亿</div>
                    <div class="today_list_font">今日最新交易<span>0.5</span>亿</div>
                </div>
                <div class="middle_top_list">
                    <div class="list_title">累计生产量</div>
                    <div class="list_num list_num3"><span class="counter-value">1137</span>万</div>
                    <div class="today_list_font">今日生产量<span>10</span>万</div>
                </div>
            </div>
            <div id="map" class="middle_bottom"></div>
        </div>
        <div class="data_right">
            <div class="right_top">
                <div class="left_top_title">今日各地生产量报表(百)</div>
                <div id="Land_analysis" class="left_top_main right_top_main"></div>
            </div>
            <div class="right_bottom">
                <div class="left_top_title">今日各地销售量报表(百)</div>
                <div id="Information_Delivery" class="left_top_main right_top_main"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
<script src="https://data.jianshukeji.com/geochina/hubei.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts-en.min.js"></script>
<script type="text/javascript">
    function OSnow() {
        var agent = navigator.userAgent.toLowerCase();
        var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
        if (agent.indexOf("win32") >= 0 || agent.indexOf("wow32") >= 0) {
            $(".main").css("height", "880px");
        }
        if (agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0) {
            $(".main").css("height", "880px");
        }
        if (isMac) {

        }
    }

    OSnow();

    function numInit() {
        $('.counter-value').each(function () {
            $(this).prop('Counter', 0).animate({
                Counter: $(this).text()
            }, {
                duration: 2500,
                easing: 'swing',
                step: function (now) {
                    $(this).text(now.toFixed(2));
                }
            });
        });
    }

    numInit();
    // 基于准备好的dom，初始化echarts实例
    var i = 0;
    var myChart1 = echarts.init(document.getElementById('Business_type'));

    // 指定图表的配置项和数据
    option1 = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            x: 'center',
            y: 'bottom',
            data: ['乙肝疫苗', '卡介苗', '小儿麻痹疫苗', '狂犬疫苗', 'HPV'],
            textStyle: {
                color: '#4ADEFE',
            }
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['30%', '55%'],
                center: ['45%', '35%'],
                avoidLabelOverlap: false,
                data: [
                    {value: 335, name: '乙肝疫苗'},
                    {value: 310, name: '卡介苗'},
                    {value: 234, name: '小儿麻痹疫苗'},
                    {value: 135, name: '狂犬疫苗'},
                    {value: 1548, name: 'HPV'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ],
        color: ['#F3DB5D', '#009AFF', '#F77474', '#28DCCF', '#FF5937']
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);


    var myChart2 = echarts.init(document.getElementById('Land_analysis'));

    option2 = {
        legend: {
            x: 'right',
            y: 'top',
            textStyle: {
                color: '#4ADEFE',
            }
        },
        grid: {
            x: 30,
            y: 50,
            x2: 0,
            y2: 45
        },
        tooltip: {},
        dataset: {
            source: [
                ['product', 'HPV', '卡介苗'],
                ['武汉市', 143.3, 85.8],
                ['黄石市', 83.1, 73.4],
                ['十堰市', 86.4, 65.2],
                ['宜昌市', 72.4, 53.9],
                ['襄阳市', 72.4, 53.9],
            ]
        },
        xAxis: {
            type: 'category',
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#4ADEFE",
                },
            },
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            axisLine: {
                lineStyle: {
                    color: "#4ADEFE",
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#4ADEFE'
                }
            }
        },
        series: [
            {
                type: 'bar',
                barMaxWidth: '10',
                itemStyle: {
                    normal: {
                        color: '#4ADEFE'
                    },
                },
            },
            {
                type: 'bar',
                barMaxWidth: '10',
                itemStyle: {
                    normal: {
                        color: '#F3DB5C',
                    },
                },
            }
        ]
    };
    myChart2.setOption(option2);

    var myChart3 = echarts.init(document.getElementById('Information_Delivery'));

    option3 = {
        legend: {
            x: 'right',
            y: 'top',
            textStyle: {
                color: '#4ADEFE',
            }
        },
        grid: {
            x: 30,
            y: 50,
            x2: 0,
            y2: 45
        },
        tooltip: {},
        dataset: {
            source: [
                ['product', 'HPV', '卡介苗'],
                ['武汉市', 43.3, 45.8],
                ['黄石市', 43.1, 73.4],
                ['宜昌市', 22.4, 53.9],
                ['鄂州市', 73.4, 52.9],
                ['孝感市', 12.4, 90.9],
            ]
        },
        xAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: "#4ADEFE",
                }
            }
        },
        yAxis: {
            axisLine: {
                lineStyle: {
                    color: "#4ADEFE",
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#4ADEFE',
                }
            }
        },
        series: [
            {
                type: 'bar',
                barMaxWidth: '10',
                itemStyle: {
                    normal: {
                        color: '#4ADEFE'
                    },
                },
            },
            {
                type: 'bar',
                barMaxWidth: '10',
                itemStyle: {
                    normal: {
                        color: '#F3DB5C',
                    },
                },
            }
        ]
    };
    myChart3.setOption(option3);


    // 随机数据
    var data = [{"name": "武汉", "value": 42}, {"name": "黄石", "value": 81}, {"name": "十堰", "value": 94}, {
        "name": "宜昌",
        "value": 8
    }, {"name": "襄阳", "value": 67}, {"name": "鄂州", "value": 38}, {"name": "荆门", "value": 7}, {
        "name": "孝感",
        "value": 9
    }, {"name": "荆州", "value": 77}, {"name": "黄冈", "value": 78}, {"name": "咸宁", "value": 17}, {
        "name": "随州",
        "value": 83
    }, {"name": "恩施", "value": 23}, {"name": "仙桃", "value": 75}, {"name": "潜江", "value": 65}, {
        "name": "天门",
        "value": 13
    }, {"name": "神农架", "value": 92}];
    option4 = {
        title: {
            text: ''
        },
        tooltip: {
            enabled: false
        },
        chart: {
            backgroundColor: 'transparent',
        },
        legend: {
            enabled: true,
        },
        colorAxis: {
            minColor: '#0666D5',
            maxColor: '#062A6C'
        },
        series: [{
            data: data,
            borderColor: '#6099EC',
            borderWidth: 0.5,
            mapData: Highcharts.maps['cn/hubei'],
            name: '',
            joinBy: ['name'], // 根据 name 属性进行关联
            states: {
                enabled: true,
                hover: {
                    color: '#F3DB5C'
                }
            },
            dataLabels: {
                enabled: true,
                color: '#4ADEFE',
                format: '{point.name}'
            },
            cursor: 'pointer',
            events: {
                click: function (e) {
                    if (e.point.name == "长沙") {
                        $(".list_num1 span").text('6666');
                        $(".list_num2 span").text('903.22');
                        $(".list_num3 span").text('1356.77');

                        $(".circle_num1").text('1800.35');
                        $(".circle_num2").text('892.95');
                        $(".circle_num3").text('2016.15');

                        option1.series[0].data = [
                            {value: 100, name: '土地经营权'},
                            {value: 240, name: '土地流转权'},
                            {value: 130, name: '房屋所有权'},
                            {value: 200, name: '集体建设用地'},
                            {value: 400, name: '林权'}
                        ]
                        myChart1.setOption(option1);

                        data[0].color = "#F3DB5C";
                        new Highcharts.Map('map', option4);
                        numInit();
                    }
                }
            }
        }]
    }
    // 初始化图表
    var map = new Highcharts.Map('map', option4);
</script>